<template>
  <div class="user-myappointments-container">
    <div class="user-myappointments">
      <div
        class="user-myappointments-item"
        v-for="appointment in paginatedAppointments"
        :key="appointment.id"
        @click="handleItemClick(appointment)"
      >
        <img
          :src="getStatusIcon(appointment.statue)"
          class="status-icon"
          :alt="getStatusText(appointment.statue)"
        />
        <div class="user-myappointments-detail">
          <span>{{ getStatusText(appointment.statue) }}</span>
          <span>{{ name }} | {{ id }}</span>
          <span
            >{{ appointment.doctorName }} | {{ appointment.department }}</span
          >
        </div>
        <div class="user-myappointments-time">
          <span>就诊时间</span>
          <span>{{ appointment.date }}</span>
          <span>{{ appointment.time }}</span>
        </div>
      </div>
    </div>
    <div class="pagination-block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="myappointments.length"
      />
    </div>
  </div>
  <el-alert
    v-show="isSuccess"
    title="支付成功！！！"
    type="success"
    show-icon
    center:true
    class="alert-item"
  />
  <el-alert
    v-show="isdefeat"
    title="支付失败！！！"
    type="warning"
    show-icon
    center:true
    class="alert-item"
  />
  <el-dialog
    v-model="appointment_dialogVisible"
    width="82vw"
    style="margin-left: 10vw"
    :before-close="handleClose"
  >
    <template #title>
      <span style="margin-left: 10vw">请支付</span>
    </template>
    <div class="user-appointment-payment-detail">
      <div class="user-appointment-payment-items recure-time">
        就诊时间:
        <span>{{ appointment.time }}</span>
      </div>
      <div class="user-appointment-payment-items">
        医院名称:
        <span>重庆大学附属医院</span>
      </div>
      <div class="user-appointment-payment-items">
        就诊科室:
        <span> {{ appointment.department }}</span>
      </div>
      <div class="user-appointment-payment-items">
        医生姓名:
        <span> {{ appointment.doctorName }}</span>
      </div>
      <div class="user-appointment-payment-items">
        支付金额:
        <span> 50</span>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="appointmentSurePay()"
          >确认支付</el-button
        >
        <el-button @click="appointmentNoPay()"> 取消支付 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import axios from "axios";
import dayjs from "dayjs";
export default {
  name: "UserMyAppointments",
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      name: "张三",
      isSuccess: false,
      isdefeat: false,
      appointment_dialogVisible: false,
      id: "1",
      appointment: {
        time: "2021-09-01 09:00",
        department: "内科",
        doctorName: "张三",
      },
      paginatedAppointments: [],
      myappointments: [
        {
          id: "1",
          doctorName: "张医生",
          date: "2021-09-01",
          time: "09:00-10:00",
          department: "内科",
          statue: "1",
          operation: "0",
        },
        {
          id: "2",
          doctorName: "李医生",
          date: "2021-09-01",
          time: "09:00-10:00",
          department: "外科",
          statue: "2",
          operation: "0",
        },
        {
          id: "3",
          doctorName: "王医生",
          date: "2021-09-01",
          time: "09:00-10:00",
          department: "内科",
          statue: "0",
          operation: "0",
        },
      ],
    };
  },
  methods: {
    getStatusIcon(statue) {
      if (statue === "1") {
        return "/images/ok.png";
      } else if (statue === "0") {
        return "/images/waiting.png";
      }
      return "/images/needpay.png";
    },
    getStatusText(statue) {
      if (statue === "1") {
        return "就诊完成";
      } else if (statue === "0") {
        return "等待中";
      }
      return "待支付";
    },
    handleItemClick(appointment) {
      if (appointment.statue === "1") {
        this.handleCompletedAppointment(appointment);
      } else if (appointment.statue === "0") {
        this.handlePendingAppointment(appointment);
      } else {
        this.handleUnknownStatus(appointment);
      }
    },
    handleCompletedAppointment(appointment) {
      this.$router.push({
        name: "UserCheckRecord",
        params: { id: appointment.id },
      });
      console.log("处理已完成的预约:", appointment);
      // 在这里添加处理已完成预约的逻辑
    },
    handlePendingAppointment(appointment) {
      localStorage.setItem("appointment", JSON.stringify(appointment));
      this.$router.push({
        name: "UserWaiting",
        params: { id: appointment.id },
      });
      console.log("处理待就诊的预约:", appointment);
      // 在这里添加处理待就诊预约的逻辑
    },
    handleUnknownStatus(app) {
      console.log("处理未知状态的预约:", app);
      // 在这里添加处理未知状态预约的逻辑
      this.appointment_dialogVisible = true;
      this.appointment.time = app.time;
      this.appointment.arrangeId = app.id;
      this.appointment.doctorName = app.doctorName;
      this.appointment.department = app.department;
    },
    appointmentSurePay() {
      console.log(this.appointment.arrangeId);
      axios.get("http://192.168.228.82:8080/arrange/updateIfPay", {
        params: {
          arrangeId: this.appointment.arrangeId,
        },
      });
      this.appointment_dialogVisible = false;
      window.location.reload();
      this.isSuccess = true;
      setTimeout(() => {
        this.isSuccess = false;
      }, 1000);
    },
    appointmentNoPay() {
      this.appointment_dialogVisible = false;
      this.isdefeat = true;
      setTimeout(() => {
        this.isdefeat = false;
      }, 1000);
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.paginatedAppointments = this.myappointments.slice(
        (page - 1) * this.pageSize,
        page * this.pageSize
      );
      localStorage.setItem("currentPage", page);
      console.log(this.pageSize, page);
      console.log(this.paginatedAppointments);
    },
  },
  mounted() {
    this.name = JSON.parse(localStorage.getItem("user")).name;
    this.id = JSON.parse(localStorage.getItem("user")).pid;
    this.currentPage = parseInt(localStorage.getItem("currentPage")) || 1;
    console.log("当前页码:", this.currentPage);
    axios
      .get("http://192.168.228.82:8080/arrange/findArrangeByPId2", {
        params: {
          pId: this.id,
        },
      })
      .then((res) => {
        this.myappointments = res.data.arrangeList
          .map((item) => {
            let strtime = dayjs(item.arrangeTime)
              .subtract(8, "hour")
              .format("YYYY-MM-DD HH:mm:ss");
            return {
              id: item.arrangeId,
              doctorName: item.doctor.name,
              tmpTime: strtime,
              date: strtime.split(" ")[0],
              time:
                item.startTime.split(" ")[1].slice(0, 5) +
                "-" +
                item.endTime.split(" ")[1].slice(0, 5),
              department: item.doctor.department,
              statue:
                item.ifFinish === "2" ? "1" : item.ifPay === "1" ? "0" : "2",
              peopleAhead: item.peopleAhead,
            };
          })
          .sort((a, b) => new Date(a.tmpTime) - new Date(b.tmpTime));
        this.paginatedAppointments = this.myappointments.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
      });
  },
};
</script>

<style scoped>
.user-myappointments {
  margin-top: 50px;
  height: 80vh;
}
.user-myappointments-item {
  width: 90vw; /* 设置宽度 */
  height: 70px; /* 设置高度 */
  margin: 10px 0; /* 上下外边距 */
  padding: 15px; /* 内边距 */
  background-color: #f9f9f9; /* 背景颜色 */
  border-radius: 10px; /* 圆角 */
  border: 1px solid #ddd; /* 边框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
}
.status-icon {
  width: 40px;
  height: 40px;
  margin-top: 15px;
  margin-left: -70vw;
}
.user-myappointments-detail {
  width: 50vw;
  height: 60px;
  margin-left: 20vw;
  margin-top: -55px;
  display: flex; /* 使用flexbox布局 */
  flex-direction: column; /* 垂直排列子元素 */
  flex: 1; /* 占据剩余空间 */
}
.user-myappointments-detail span {
  text-align: left;
  margin-bottom: 2px; /* 添加下边距 */
  font-family: "Arial", sans-serif; /* 设置字体 */
  font-size: 15px; /* 设置字体大小 */
  color: #333; /* 设置字体颜色 */
}
.user-myappointments-time {
  width: 30vw;
  height: 60px;
  margin-left: 60vw;
  margin-top: -60px;
  display: flex; /* 使用flexbox布局 */
  flex-direction: column; /* 垂直排列子元素 */
  flex: 1; /* 占据剩余空间 */
}
.user-myappointments-time span {
  text-align: left;
  margin-bottom: 5px; /* 添加下边距 */
  font-family: "Arial", sans-serif; /* 设置字体 */
  font-size: 15px; /* 设置字体大小 */
  color: #333; /* 设置字体颜色 */
}
.pagination-block {
  display: flex; /* 使用flexbox布局 */
  justify-content: center; /* 水平居中对齐 */
  margin-top: 20px; /* 添加上边距 */
  margin-left: 15px;
}

.alert-item {
  position: absolute; /* 绝对定位 */
  top: 45%; /* 距离页面顶部20px */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 修正居中 */
  width: 50%;
  z-index: 9999; /* 确保alert显示在其他元素上面 */
}
.user-appointment-payment-detail {
  padding: 20px;
  font-size: 16px;
}
.user-appointment-payment-items {
  height: 10px;
  margin-top: 10px;
  padding: 15px; /* 内边距 */
}
.custom-page-header {
  margin-left: 20px;
}
</style>
